import * as React from 'react';
import { Input, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons/lib';

export interface HelpInputProps {
  value?: string | ReadonlyArray<string> | number;
  tips?: React.ReactNode;
}

const HelpInput: React.FC<HelpInputProps> = (props) => {
  const { children, value, tips } = props;

  return (
    <Input
      value={value}
      suffix={
        <Tooltip title={tips || children}>
          <QuestionCircleOutlined />
        </Tooltip>
      }
    />
  );
};

HelpInput.defaultProps = {};

export default HelpInput;
